<template>
  <div>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout m-b-20" :class="!isMobile && 'desktop'">
      <a-row :gutter="16" type="flex">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card
            class="antd-pro-pages-dashboard-analysis-salesCard"
            :loading="loading"
            :bordered="false"
            :style="{ height: '100%' }"
          >
            <h4 style="font-size: 18px; font-weight: 600; color: rgba(51, 70, 129, 1)">资产概况</h4>
            <assetPie :propsData="overviewData"></assetPie>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :style="{ height: '100%' }">
            <h4 style="font-size: 18px; font-weight: 600; color: rgba(51, 70, 129, 1)">自持房屋经营状态占比</h4>
            <rose :propsData="proportionData"></rose>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-row :gutter="16">
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '23px' }">
        <!-- 年度累计指标（物业板块+驾培板块） -->
        <chart-card :loading="loading" title="年度累计指标（物业板块）">
          <span style="color: rgba(121, 72, 234, 1)" slot="total">{{ executionData.NDZB }}<span style="font-size: 16px;">&nbsp;万</span></span>
          <div>
            <mini-progress color="rgba(121, 72, 234, 1)" :target="executionData.ndwcbl" :percentage="executionData.ndwcbl" height="8px" />
          </div>
          <template slot="footer">
            <div>
              <trend :flag="executionData.yzrxb > 0 ? 'plus' : 'minus'" reverseColor style="margin-right: 16px">
                <span slot="term">与昨日相比</span>{{ Math.abs(executionData.yzrxb) | retain }}%
              </trend>
              <trend :flag="executionData.ysynxb > 0 ? 'plus' : 'minus'" reverseColor>
                <span slot="term">与上年相比</span>{{ Math.abs(executionData.ysynxb) | retain }}%
              </trend>
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="房屋（㎡）" class="custom-card">
          <span style="color: rgba(42, 130, 228, 1)" slot="total">{{ isYearHouseVacancy ? areaData.KZMJ : areaData.YZLMJ | NumberFormat }}</span>
          <template slot="action">
            <a-radio-group defaultValue="租赁" size="small" @change="handleChangeHouseVacancy('year', $event)">
              <a-radio-button value="空置">空置</a-radio-button>
              <a-radio-button value="租赁">租赁</a-radio-button>
            </a-radio-group>
          </template>
          <div>
            <mini-bar :propsData="isYearHouseVacancy ? houseAreaData.vacant :houseAreaData.year" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="合同签订" class="custom-card">
          <span style="color: rgba(109, 210, 48, 1)" slot="total">{{ areaData.BNHTQDL }}</span>
          <div>
            <mini-bar :propsData="contractData.year" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总出租率" class="custom-card">
          <div>
            <circular :propsData="areaData.CZL"></circular>
          </div>
        </chart-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <!-- <chart-card :loading="loading" title="月度累计指标">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <ring></ring>
          </div>
        </chart-card> -->
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <a-row :gutter="16" type="flex">
            <a-col :span="12">
              <div class="chart-card-header">
                <div class="meta">
                  <!-- 月度累计指标（物业板块+驾培板块）  -->
                  <span class="chart-card-title">月度累计指标（物业板块） </span>
                </div>
                <div
                  class="total"
                  style="
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    white-space: nowrap;
                    color: #000;
                    margin-top: 4px;
                    margin-bottom: 0;
                    line-height: 38px;
                    height: 38px;
                    color: rgba(121, 72, 234, 1);
                  "
                >
                  <span style="font-size: 30px;">{{ executionData.YDZB }}</span>
                  <span>&nbsp;万</span>
                </div>
              </div>
            </a-col>
            <a-col :span="12">
              <ring :scale="executionData.ydwcbl"></ring>
            </a-col>
          </a-row>
          <div style="border-top: 1px solid #e8e8e8; padding-top: 8px; margin-top: 8px">
            <div
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0;"
            >
              <div>
                <trend
                  :flag="
                    executionData.yzrxb > 0 ? 'plus' : 'minus'"
                  reverseColor
                  style="margin-right: 16px">
                  <span slot="term">与昨日相比</span>{{ Math.abs(executionData.yzrxb) | retain }}%
                </trend>
                <trend :flag="executionData.ysyyxb > 0 ? 'plus' : 'minus'" reverseColor>
                  <span slot="term">与上月相比</span>{{ Math.abs(executionData.ysyyxb) | retain }}%
                </trend>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="房屋（㎡）" class="custom-card">
          <span style="color: rgba(42, 130, 228, 1)" slot="total">{{ isMonthHouseVacancy ? areaData.KZMJ : areaData.BYZLMJ | NumberFormat }}</span>
          <template slot="action">
            <a-radio-group defaultValue="租赁" size="small" @change="handleChangeHouseVacancy('month', $event)">
              <a-radio-button value="空置">空置</a-radio-button>
              <a-radio-button value="租赁">租赁</a-radio-button>
            </a-radio-group>
          </template>
          <div>
            <mini-bar :propsData="isMonthHouseVacancy ? houseAreaData.vacant :houseAreaData.month" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="合同签订" class="custom-card">
          <span style="color: rgba(109, 210, 48, 1)" slot="total">{{ areaData.BYHTQDL }}</span>
          <div>
            <mini-bar :propsData="contractData.month" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="月新增出租率" class="custom-card">
          <div>
            <circular :propsData="areaData.BYCZL" extremely></circular>
          </div>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs @change="handleChange" default-active-key="FWZL" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <!-- <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-select :style="{ width: '200px' }" placeholder="请选择小区">
              <a-select-option value="超一星城">超一星城</a-select-option>
            </a-select>
          </div> -->
          <a-tab-pane tab="房屋租赁" key="FWZL">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :propsData="incomeData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :propsData="listData" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="物业费" key="WYF">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :propsData="incomeData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :propsData="listData" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="设备租赁" key="QTZL">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :propsData="incomeData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :propsData="listData" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="其他收入" key="QTSR">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :propsData="incomeData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list type="QTSR" :propsData="listData" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" class="m-t-24">
      <h4 style="font-size: 18px; font-weight: 600; color: rgba(51, 70, 129, 1)">房屋租金流水</h4>
      <lines :propsData="summaryData"></lines>
    </a-card>
  </div>
</template>

<script>
// import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniProgress,
  RankList,
  Trend,
  NumberInfo,
  MiniSmoothArea,
  Ring,
  Rose
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
import assetPie from './components/pie.vue'
import Lines from './components/lines'
import Bar from './components/bars'
import Circular from './components/circular'
import MiniBar from './components/miniBar'
import { getAssetOverview, getAssetOverviewTotal, getHouseProportion, getSummary, getSummaryList, getExecution, getArea } from '@/api/common'
import BigNumber from 'bignumber.js'

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    Lines,
    NumberInfo,
    MiniSmoothArea,
    Ring,
    Rose,
    assetPie,
    Circular
  },
  data () {
    return {
      loading: true,

      overviewData: {
        column: [],
        pie: [],
        total: 0
      },
      proportionData: [],
      summaryData: {},
      incomeData: {},
      listData: [],
      executionData: {},
      areaData: {},
      houseAreaData: {},
      contractData: {},
      flowData: {},
      isYearHouseVacancy: false,
      isMonthHouseVacancy: false
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const overview = getAssetOverview()
      const overviewTotal = getAssetOverviewTotal()
      const proportion = getHouseProportion()
      const summary = this.fetchBarData({
        mode: 'MYZJ',
        category: 'FWZL'
      })
      const list = this.fetchListData()
      const execution = getExecution()
      const area = getArea()
      const leaseArea = this.fetchBarData({
        mode: 'ZLMJTJ',
        category: 'ZLMJTJ'
      })
      const contract = this.fetchBarData({
        mode: 'HTSLTJ',
        category: 'HTSLTJ'
      })
      const flow = this.fetchBarData({
        mode: 'ZJLS',
        category: 'ZJLS'
      })
      Promise.all([overview, overviewTotal, proportion, summary, list, execution, area, leaseArea, contract, flow]).then(res => {
        this.overviewData.column = res[0]
        this.overviewData.pie = res[1]
        this.overviewData.total = this.total(res[1])
        this.proportionData = res[2]
        this.incomeData = res[3]
        this.listData = res[4]
        this.executionData = Object.assign({}, res[5][0], {
          NDZB: new BigNumber(res[5][0].NDZB).div(10000).toFixed(2),
          YDZB: new BigNumber(res[5][0].YDZB).div(10000).toFixed(2),
          ndwcbl: this.calculate({
            ndzb: res[5][0].NDZB,
            ywc: res[5][0].BNYWC
          }),
          ydwcbl: this.calculate({
            ndzb: res[5][0].YDZB,
            ywc: res[5][0].BYYWC
          }),
          yzrxb: this.compare(res[5][0].YZRXB),
          ysynxb: this.compare(res[5][0].YSYNXB),
          ysyyxb: this.compare(res[5][0].YSYYXB)
        })
        this.areaData = res[6][0]
        this.houseAreaData = Object.assign({}, res[7], {
          year: {
            title: res[7].X_ZB.split(',') || [],
            data: res[7].SJJH[0].VALUEDATA.split(',') || []
          },
          month: {
            title: res[7].X_ZB.split(',') || [],
            data: res[7].SJJH[1].VALUEDATA.split(',') || []
          },
          vacant: {
            title: res[7].X_ZB.split(',') || [],
            data: res[7].SJJH[2].VALUEDATA.split(',') || []
          }
        })
        this.contractData = Object.assign({}, res[8], {
          year: {
            title: res[8].X_ZB.split(',') || [],
            data: res[8].SJJH[0].VALUEDATA.split(',') || []
          },
          month: {
            title: res[8].X_ZB.split(',') || [],
            data: res[8].SJJH[1].VALUEDATA.split(',') || []
          }
        })
        this.summaryData = res[9]
      }).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    },
    handleChangeHouseVacancy (t, e) {
      if (t === 'year') {
        this.isYearHouseVacancy = e.target.value === '空置'
      } else {
        this.isMonthHouseVacancy = e.target.value === '空置'
      }
    },
    compare (d) {
      if (!d) return 0
      let scale = 0
      if (d === 0) {
        scale = 0
      } else {
        scale = 1 - (d * 100)
      }
      return scale
    },
    calculate (d) {
      if (!d.ywc && !d.ndzb) return 0
      let scale = 0
      if (d.ndzb === 0) {
        scale = 100
      } else {
        const result = Math.round((d.ywc / d.ndzb) * 100)
        // 2023-02-21 代码修改
        // scale = result > 100 ? 100 : result
        scale = result
      }
      return scale
    },
    total (arr) {
      const result = arr.reduce((a, b) => {
        return a + b.value * 1
      }, 0) || 0
      return result.toFixed(2)
    },
    handleChange (key) {
      this.fetchBarData({
        mode: 'MYZJ',
        category: key
      }).then(res => {
        this.incomeData = res
      })
      this.fetchListData(key).then(res => {
        this.listData = res
      })
    },
    fetchBarData (t) {
      return getSummary({
        Type: 'ZZT',
        Mode: t.mode,
        Category: t.category,
        strContent: '',
        UserID: this.$store.getters.userid
      })
    },
    fetchListData (t) {
      return getSummaryList({
        mode: t || 'FWZL'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.custom-card {
  /deep/ .chart-card-content {
    height: 68px;
  }
  /deep/.chart-card-footer {
    border: none;
  }
}
</style>
